<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">

<head th:replace="/common/include :: header(~{::title}, ~{::link}, ~{::style})">
	<title>系统管理-字典管理</title>
	<link th:href="${ctx}+'lib/jquery-layout/jquery.layout-latest.css'" rel="stylesheet"/>
	<link th:href="${ctx}+'lib/jquery-ztree/3.5/css/metro/zTreeStyle.css'" rel="stylesheet"/>
	<style>
		.vertical-scroll-layout {
			max-height: calc(100vh - 45px);
			overflow-y: auto;
			padding-bottom: 3px;
		}
	</style>
</head>
<div class="gray-bg">
	<th:block th:include="/common/breadcrumb :: breadcrumb"/>
	<!-- 字典列表 -->
	<div class="col-md-4 col-sm-4 col-xs-12 vertical-scroll-layout">
		<div class="search-collapse">
			<div class="box box-main">
				<div class="box-header">
					<div class="box-title"><h2>字典列表</h2></div>
					<div class="btn-group box-tools pull-right">
						<button type="button" class="btn btn-sm" id="btnCollapse" style="display:none;">
							<i class="fa fa-chevron-up">折叠</i>
						</button>
						<button type="button" class="btn btn-sm" id="btnExpand">
							<i class="fa fa-chevron-down">展开</i>
						</button>
						<button type="button" class="btn btn-sm" id="btnRefresh">
							<i class="fa fa-refresh"></i>刷新
						</button>
						<button type="button" class="btn btn-sm" onclick="newNode()" th:classappend="${@config.hasPermission('system:dict:add')}">
							<i class="fa fa-plus"></i>添加字典
						</button>
						<button type="button" class="btn btn-sm" onclick="newChildNode()" th:classappend="${@config.hasPermission('system:dict:add')}">
							<i class="fa fa-sitemap"></i>添加字典选项
						</button>
						<button type="button" class="btn btn-sm" onclick="delNode()" th:classappend="${@config.hasPermission('system:dict:del')}">
							<i class="fa fa-trash"></i>删除字典
						</button>
					</div>
				</div>
				<!-- 树型列表 -->
				<div id="dict_tree" class="box-main ztree"></div>

				<div class="dict_tree tree-rMenu">
					<a href="#" class="list-group-item" onclick="newChildNode();" th:classappend="${@config.hasPermission('system:dict:add')}">添加选项</a>
					<a href="#" class="list-group-item" onclick="delNode();" th:classappend="${@config.hasPermission('system:dict:del')}">删除</a>
				</div>
			</div>
		</div>
	</div>

	<!-- 字典详情 -->
	<div class="col-md-8 col-sm-8 col-xs-12">
		<div class="search-collapse">
			<form class="form-horizontal m" id="form-dict-edit">
				<input id="dictCode" name="dictCode" type="hidden"/>
				<input id="parentCode" name="parentCode" type="hidden"/>
				<input id="ancestors" name="ancestors" type="hidden"/>
				<input id="isLeaf" name="isLeaf" type="hidden"/>
				<div class="form-group">
					<label class="col-sm-3 control-label">字典组：</label>
					<div class="col-sm-8">
						<input class="form-control" type="text" name="dictGroup" id="dictGroup"/>
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-3 control-label">字典标签：</label>
					<div class="col-sm-8">
						<input class="form-control" type="text" name="dictLabel" id="dictLabel"/>
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-3 control-label">英文标签：</label>
					<div class="col-sm-8">
						<input class="form-control" type="text" name="dictLabelEn" id="dictLabelEn"/>
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-3 control-label">字典键值：</label>
					<div class="col-sm-8">
						<input class="form-control" type="text" name="dictValue" id="dictValue"/>
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-3 control-label">排序：</label>
					<div class="col-sm-8">
						<input class="form-control" type="number" name="dictSort"/>
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-3 control-label">字典类型：</label>
					<div class="col-sm-8">
						<select class="form-control selectpicker" id="dictType" name="dictType" onchange="changeDictType(this)">
							<option value="00">组</option>
							<option value="01">选项</option>
						</select>
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-3 control-label">样式属性：</label>
					<div class="col-sm-8">
						<select class="form-control selectpicker m-b width-50" name="cssClass">
							<option value="#" class='badge badge-default'>默认</option>
							<option value="info" class='badge badge-info'>信息</option>
							<option value="primary" class='badge badge-primary'>主要</option>
							<option value="success" class='badge badge-success'>成功</option>
							<option value="warning" class='badge badge-warning'>警告</option>
							<option value="danger" class='badge badge-danger'>危险</option>
						</select>
						<span class="help-block m-b-none"><i class="fa fa-info-circle"></i> table表格字典列显示样式属性</span>
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-3 control-label">状态：</label>
					<div class="col-sm-8">
						<div class="radio-box" th:each="dict : ${@dict.getDataGroup('sys_normal_disable')}">
							<input type="radio" th:id="${dict.dictLabel + dict.dictValue}" name="status" th:value="${dict.dictValue}" default-value="1"/>
							<label th:for="${dict.dictLabel + dict.dictValue}" th:text="${dict.dictLabel}"></label>
						</div>
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-3 control-label">补充说明1：</label>
					<div class="col-sm-8">
						<textarea class="form-control" name="desc1" autocomplete="off" maxlength="200" rows="2"></textarea>
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-3 control-label">补充说明2：</label>
					<div class="col-sm-8">
						<textarea class="form-control" name="desc2" autocomplete="off" maxlength="200" rows="2"></textarea>
					</div>
				</div>
				<div class="form-group">
					<div class="col-sm-6 pull-right" th:classappend="${@config.hasPermission('system:dict:add,system:dict:edit')}">
						<button class="btn btn-success form-submit" type="button" onclick="save()">保存</button>
					</div>
				</div>
			</form>
		</div>
	</div>

	<div th:replace="/common/include :: footer"></div>
	<div th:replace="/common/include :: ztreeJs"></div>
	<div th:replace="/common/include :: jqueryLayoutJs"/></div>

	<script th:inline="javascript">
		var permitted = [[${@config.isPermittedOperator('system:dict:add,system:dict:edit')}]];
        var prefix = ctx + 'api/system/dict';
        var checkNode;

        $(function() {
            initDictTree();

            $('#btnExpand').click(function() {
				$.tree.expand();
                $(this).hide();
                $('#btnCollapse').show();
            });
            $('#btnCollapse').click(function() {
				$.tree.collapse();
                $(this).hide();
                $('#btnExpand').show();
            });
            $('#btnRefresh').click(function() {
                initDictTree();
            });
        });

        function initDictTree() {
            var url = prefix + '/treeData';
            var options = {
                url: url,
                expandLevel: 0,
                onClick: zOnClick,
				onRightClick: zOnRightClick
            };
            $.tree.init('dict_tree', options);
            resetDictForm();
        }

        function zOnClick(event, treeId, treeNode) {
			checkNode = treeNode.id;
            resetDictForm();
            initDictForm(checkNode);
        }

		function zOnRightClick(event, treeId, treeNode) {
			checkNode = treeNode.id;
			if (!treeNode && event.target.tagName.toLowerCase() != 'button' && $(event.target).parents('a').length == 0) {
				$.tree.showRMenu('root', event.clientX + 5, event.clientY - 50);
			}else if (treeNode && !treeNode.noR) {
				$.tree.showRMenu('node', event.clientX + 5, event.clientY - 50);
			}
		}

        function initDictForm(dictCode, parent) {
            var parentCode;
            if (parent) {
                parentCode = dictCode;
			}
            // 表单赋值
            $.operate.get({
                url: prefix + '/load',
                data: {
                    'id': dictCode,
                    'pid': parentCode
                },
                success: function(result) {
                    if (result.code == 200) {
                        $.form.load('form-dict-edit', result.param, !permitted);
                        $.form.initValidator('form-dict-edit', 'tbSysDict');
                    } else {
						$.modal.toast.error(result.msg, result.param);
                    }
                },
                error: function(result) {
                    window.location.href = ctx + '500';
                }
            });
        }

        function resetDictForm() {
            $.form.reset('form-dict-edit');
        }

        function changeDictType(ele) {
            if ('00' == $(ele).val()) {
                $('#isLeaf').val('N');
			} else {
                $('#isLeaf').val('Y');
			}
		}

		function setReadOnly(value) {
            $('#dictGroup').attr('readonly', value);
            $('#dictType').attr('disabled', value);
		}

        function newNode() {
			resetDictForm();
            initDictForm('0', true);
        }

		function newChildNode() {
			resetDictForm();
			if ($.common.isEmpty(checkNode)) {
				$.modal.toast.warning('请选择字典组');
				return;
			}
			initDictForm(checkNode, true);
		}

        function save() {
			if ($.form.isValid('form-dict-edit')) {
				var flag = $('#dictType').attr('disabled');
				$('#dictType').attr('disabled', false);
				// 加载参数数据
				var param = $.form.serialize('form-dict-edit');
				$('#dictType').attr('disabled', flag);

				$.ajax({
					url: prefix + '/save',
					type: 'post',
					dataType: 'json',
					data: param,
					success: function (result) {
						if (result.code == 200) {
                            $.modal.toast.success(result.msg);
							initDictTree();
						} else {
                            $.modal.toast.error(result.msg, result.param);
						}
					}
				});
			}
		}

        function delNode() {
            var url = prefix + '/delete';
            var nodes = checkNode;
            if (!checkNode) {
                nodes = $.tree.getCheckedNodes();
            }
            $.operate.remove(url, nodes, null, 'initDictTree');
        }

	</script>
</body>
</html>
